<template>
	<view>
		<u-navbar height="50" back-icon-color="#000" :background="background" title="支付" title-color="#000"
			title-size="36">
		</u-navbar>
		<view class="payTimeView2" style="margin-top: 30rpx;">
			<view class="payPrice">￥{{totalPrice}}</view>
			
		</view>
		<view class="payItemView">
			<view class="payTypeTitme">请选择支付方式</view>
			<view class="payTypeItem" @click="onSelected(0)">
				<u-icon name="/static/icons/weixin.png" size="50"></u-icon>
				<view class="payTypeTitle">微信</view>
				<u-icon name="/static/icons/selected.png" size="40" v-if="current == 0"></u-icon>
				<u-icon name="/static/icons/unselected2.png" size="40" v-else></u-icon>
			</view>
		</view>
		<view class="relaseView" @click="onOrderPayment()">立即支付</view>
	</view>
</template>

<script>
	import {
		getWechatPay
	} from '../../api/index.js'
	import {
		toast
	} from '../../utils/common.js';
	export default {
		data() {
			return {
				timestamp: 1800,
				background: {
					backgroundColor: '#fff'
				},
				current: 0,
				items: [{
					value: '微信',
					image: '/static/weixin.png',
					name: '微信支付',
				}, {
					value: '支付宝',
					image: '/static/alipay.png',
					name: '支付宝支付',
				}, {
					value: '余额',
					image: '/static/balance.png',
					name: '余额支付',
				}],
				orderNo: '',
				totalPrice: '0.00',
				balance: '',
				params: ""
			}
		},
		onLoad(res) {
			console.log(res);
			if (res.order_no) {
				this.orderNo = res.order_no
			}
			if(res.params){
				this.params = JSON.parse(res.params)
			}
			this.totalPrice = Number(res.money).toFixed(2);
		},
		methods: {
			onSelected(index) {
				this.current = index;
			},
			onOrderPayment() {
				let self = this;
				if (this.orderNo) {
					getWechatPay({
						orderId: this.orderNo,
						method:"wechat"
					}).then(res => {
						// self.onPayment("wxpay", res.data);
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.pay_params.timeStamp,
							nonceStr: res.data.pay_params.nonceStr,
							package: 'prepay_id=' + res.data.pay_params.prepay_id,
							signType: 'MD5',
							paySign: res.data.pay_params.paySign,
							success: function(res) {
								// success && success(res.data);
								toast('支付成功');
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/order/order'
									})
								}, 500);
							},
							fail: function(err) {
								console.log(err);
								uni.showToast({
									title: '支付失败',
									icon: 'none',
									duration: 2000
								});
								// fail && fail(err.data);
							},
							complete(ress) {
								// complete && complete(ress.data);
							}
						});
					})
				} else {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: this.params.timeStamp,
						nonceStr: this.params.nonceStr,
						package: 'prepay_id=' + this.params.prepay_id,
						signType: 'MD5',
						paySign: this.params.paySign,
						success: function(res) {
							// success && success(res.data);
							toast('支付成功');
							setTimeout(function() {
								uni.switchTab({
									url: '/pages/ucenter/ucenter'
								})
							}, 500);
						},
						fail: function(err) {
							console.log(err.errMsg);
							uni.showToast({
								title: '支付失败' + err,
								icon: 'none',
								duration: 2000
							});
							// fail && fail(err.data);
						},
						complete(ress) {
							// complete && complete(ress.data);
						}
					});
				}


			},

		}
	}
</script>

<style>
	.payTimeView {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.payTimeView2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
	}

	.payTimeTitle {
		font-size: 26rpx;
		font-weight: 400;
		color: #F6632D;
		margin-bottom: 20rpx;
	}

	.payTime {
		font-size: 36rpx;
		font-weight: 400;
		color: #F6632D;
		margin-top: 20rpx;
	}

	.payPrice {
		font-size: 48rpx;
		font-weight: bold;
		color: #333333;
	}

	.orderNumView {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 30rpx;
	}

	.orderNum {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.orderNext {
		width: 14rpx;
		height: 26rpx;
		margin-left: 30rpx;
	}

	.payItemView {
		background: #FFFFFF;
		border-radius: 20Rpx 20Rpx 0px 0px;
		margin-top: 30rpx;
	}

	.payTypeTitme {
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		height: 110rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 30rpx;
		border-bottom: 1px solid #DDDDDD70;
	}

	.payTypeItem {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1px solid #DDDDDD70;
	}

	.payTypeTitle {
		flex: 1;
		margin-left: 30rpx;
	}

	.relaseView {
		height: 80rpx;
		background: #F6632D;
		border-radius: 6rpx;
		margin: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
	}


	page {
		background: #f5f5f5;
	}
</style>